<template>
    <div>
        <div class="scrolling">
            <div class="content1">
                <div class="imgWrap">
                    <ul class="wraper" id="scrollWrapUl2" @touchstart='getTar($event)' @touchmove='getMove($event)' @touchend='getEnd($event)'>
                        <li class="images" v-for="val in goods.arr" :key="val.id">
                            <img :src="imgUrl+val.imgs" alt="">
                        </li>
                    </ul>
                    <span class="imgNum">
                        <span class="numerator">{{i2}}</span>/
                        <span class="denominator">6</span>
                    </span>
                </div>
                <div class="titleWrap">
                    <h1>{{goods.title}}</h1>
                </div>
                <div class="shopCarWrap">
                    <div class="shopCar2">
                        <div class="price">
                            <label>￥{{goods.price}}</label>
                        </div>
                        <span class="addInCar" v-show="!cars[shop_id][goods_id]" @click="add(leftNav);redPoint($event)">加入购物车</span>
                        <div class="numsChange" v-for="val1 in cars[shop_id]" :key="val1.id" v-show="val1.id==goods_id">
                            <span class="reduce numsChangeBtn" @click="red(leftNav)"></span>
                            <label class="goodsNum">{{val1.num}}</label>
                            <span class="add numsChangeBtn" @click="add(leftNav);redPoint($event)"></span>
                        </div>
                    </div>
                </div>
                <div class="storeWrap">
                    <div class="storeNameWrap">
                        <router-link to='/details' class="storeName">
                            <span class="nameIcon"></span>
                            <span class="nameTxt">{{goods.storeName}}</span>
                        </router-link>
                    </div>
                    <div class="storePhoneWrap">
                        <div class="storePhone">
                            <span class="phoneIcon"></span>
                            <span class="phoneTxt">联系商家</span>
                        </div>
                    </div>
                </div>
                <div class="appraiseWrap">
                    <div class="appraise">
                        <span class="appraiseTitle">商品评价
                            <span class="perNum">(共{{goods.perNum}}人评价)</span>
                        </span>
                        <div class="goodAppWrap">
                            <div class="greenLine">
                                <span class="hr">
                                    <span class="gCircle"></span>
                                    <span class="wCircle"></span>
                                </span>
                            </div>
                            <span class="feelGood">好评{{goods.good}}%</span>
                        </div>
                    </div>
                </div>
                <div class="goodsDetails">商品详情</div>
                <div class="detailsWrap">
                    <div class="details">
                        <div class="detailsImgWrap">
                            <div class="detailsImg">
                                <img :src="imgUrl+val.imgs" v-for="val in goods.detArr" :key="val.id">
                            </div>
                        </div>
                        <div class="detailsFoot">
                            <div class="priceTxt">价格说明</div>
                            <p class="pa1">
                                <strong>划线价格：</strong>
                                <span>划线的价格并非《中华人民共和国价格法》及《禁止价格欺诈行为的规定》等相关法律法规中所指商品“原价”的含义，仅为到家平台商家处商品的供应商指导价或建议零售价，</span>
                                <strong>并非商品原价。</strong>
                            </p>
                            <p class="pa2">
                                <strong>未划线价格：</strong>
                                <span>未划线的价格指该商家处商品在京东到家平台实时标价，具体成交价格根据商品参加的活动，或者您使用优惠券等发生变化，最终以订单结算页面价格为准。</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottomLine"></div>
        </div>
        <div id="ttt" class="d-target"></div>
        <Nav></Nav>
        <ShopCarFooter :shopId='shop_id'></ShopCarFooter>
    </div>
</template>

<script>
import ShopCarFooter from '@/components/ShopCarFooter'
import Nav from '@/components/Nav'
import $ from 'jquery'
export default {
    data(){
        return {
            goods:[],
            leftNav:[],
            i:1,
            bannerLeft:-320,
            startX:0,
            disX:0,
            dir:'',
        }
    },
    computed:{
        i2(){
            if(this.i==7){
                return 1;
            }else if(this.i==0){
                return 6;
            }else{
                return this.i;
            }
        },
        outerWrapper(){
            var outerWrapper = document.createElement('div');
            var outer = null;
            var inner = null;
            outer = document.createElement('div');
            outer.classList.add('outer');
            outer.classList.add('point-pre');
            inner = document.createElement('div');
            inner.setAttribute('class', 'inner');
            outer.appendChild(inner);
            outerWrapper.appendChild(outer);
            inner = null;
            outer = null;
            document.getElementsByClassName('scrolling')[0].appendChild(outerWrapper);
            return outerWrapper;
        }
    },
    props:['shop_id','goods_id','title'],
    components:{
        ShopCarFooter,
        Nav
    },
    created(){
        this.getGoods();
        this.getLeftNav();
    },
    methods:{
        getGoods(){
            this.axios.get('/goods').then((ret)=>{
                let {data,error}=ret.data;
                this.goods=data[0][this.goods_id][0];
            }).catch(()=>{})
        },
         getTar(e){
            var ul=document.getElementById('scrollWrapUl2');
            e.preventDefault()
            ul.style.transition = '';       //先清除ul上的transition
            this.startX = e.targetTouches[0].clientX;
            this.dir = '';       //每开始touch一次先清除滑动方向
            //如果当前touch的是第一个li，则将ul平移到倒数第二个li的位置      
            if(e.target.parentNode == ul.firstElementChild){
                this.i = ul.children.length-2;
                this.bannerLeft = -$('#scrollWrapUl2 li').width() * this.i;
                ul.style.transform = 'translateX('+this.bannerLeft+'px)';
            //如果当前touch的是最后一个li，则将ul平移到第二个li的位置
            }else if(e.target.parentNode == ul.lastElementChild){
                this.i = 1;
                this.bannerLeft = -$('#scrollWrapUl2 li').width() * this.i;
                ul.style.transform = 'translateX('+this.bannerLeft+'px)';
            }
            this.disX = this.startX - this.bannerLeft;
        },
        getMove(e){
            var ul=document.getElementById('scrollWrapUl2');
            e.preventDefault()
            this.bannerLeft = e.targetTouches[0].clientX - this.disX;
            ul.style.transform = 'translateX('+this.bannerLeft+'px)';
        },
        getEnd(e){
            var ul=document.getElementById('scrollWrapUl2');
            this.i = Math.round(-this.bannerLeft/$('#scrollWrapUl2 li').width());
            this.bannerLeft = -$('#scrollWrapUl2 li').width() *this.i;
            ul.style.transition = '0.3s';       //回弹时加上过度效果
            ul.style.transform = 'translateX('+this.bannerLeft+'px)';
        },
        getLeftNav(){
            this.axios.get('/leftnav').then((ret)=>{
                let {data,error}=ret.data;
                data=$(data).filter((index,val)=>{
                   return val.title==this.title;
                })
                data=data[0].children[0].title.txt[0].arr;
                data=$(data).filter((index,val)=>{
                   return val[0].id==this.goods_id;
                })
                this.leftNav=data[0][0];
            }).catch(()=>{})
        },
        add(goods){
            console.log(this.cars[this.shop_id]);
            if(!this.cars[this.shop_id][goods.id]){
                this.$set(this.cars[this.shop_id],goods.id,goods);
                let index = this.checkIdArr2[this.shop_id].indexOf(goods);
                if (index==-1) {
                    this.checkIdArr2[this.shop_id].push(goods);
                }
            }
            if(!this.cars[this.shop_id][goods.id].num){
                this.$set(this.cars[this.shop_id][goods.id],'num',1);
            }else{
                this.cars[this.shop_id][goods.id].num++;
            }
        },
        red(goods){
            this.cars[this.shop_id][goods.id].num--;
            if(this.cars[this.shop_id][goods.id].num==0){
                this.$delete(this.cars[this.shop_id],goods.id)
                let index = this.checkIdArr2[this.shop_id].indexOf(goods);
                this.checkIdArr2[this.shop_id].splice(index,1);
            }
        },
        redPoint(event){
            var left = event.pageX;
            var top = event.pageY;
            // 定位球元素
            var childElement = this.outerWrapper.getElementsByClassName('point-pre')[0];
            childElement.style.left = left + 'px';
            childElement.style.top = top + 'px';
            // 计算坐标差
            var endLeft=document.getElementById('ttt').offsetLeft;
            var endTop=document.getElementById('ttt').offsetTop;
            var leftDifference = -(left - endLeft);
            var topDifference = -(top - endTop-$(document).scrollTop());
            // 开始
            childElement.classList.remove('point-pre');
            setTimeout(function () {
                childElement.getElementsByClassName('inner')[0].style.transform = `translateY(${topDifference}px)`;
                childElement.style.transform = `translateX(${leftDifference}px)`;
                setTimeout(function () {
                    childElement.getElementsByClassName('inner')[0].setAttribute('style', '');
                    childElement.setAttribute('style', '');
                    childElement.classList.add('point-pre');
                }, 350);
            }, 1);
        },
    }
}
</script>

<style scoped lang='scss'>
.scrolling {
    margin-bottom: 105px;
    background: #f4f4f4;
    .content1 {
        .imgWrap {
            background: #fff;
            position: relative;
            min-height: 750px;
            z-index: 8;
            white-space: nowrap;
            text-align: left;
            overflow: hidden;
            #scrollWrapUl2 {
                margin: 0;
                padding: 0;
                position: relative;
                height: 750px;
                transform:translateX(-750px);
                li {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    width: 750px;
                    height: 750px;
                    position: relative;
                    display: inline-block;
                    vertical-align: top;
                    text-align: center;
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
            .imgNum {
                position: absolute;
                display: inline-block;
                bottom: 23px;
                right: 23px;
                background-color: rgba(0, 0, 0, 0.4);
                height: 56px;
                line-height: 56px;
                width: 117px;
                border-radius: 28px;
                text-align: center;
                color: #fff;
                font-size: 46px;
                .numerator {
                    font-size: 46px;
                }
                .denominator {
                    font-size: 37px;
                }
            }
        }
        .titleWrap {
            background-color: #fff;
            overflow: hidden;
            h1 {
                font-size: 42px;
                padding: 0 23px;
                margin: 23px 0 11px;
                color: #333;
                line-height: 56px;
                font-weight: 700;
                text-overflow: ellipsis;
                overflow: hidden;
                max-height: 107px;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                word-break: break-all;
            }
        }
        .shopCarWrap {
            background: #fff;
            padding: 0 0 0 23px;
            .shopCar2 {
                min-height: 114px;
                line-height: 114px;
                position: relative;
                .price {
                    position: relative;
                    top: 31px;
                    display: flex;
                    align-items: center;
                    label {
                        font-size: 42px;
                        line-height: 50px;
                        padding-right: 11px;
                        color: #ff3434;
                    }
                }
                .addInCar {
                    background-color: #47b34f;
                    position: absolute;
                    right: 23px;
                    top: 18px;
                    display: inline-block;
                    padding: 0 23px;
                    font-size: 30px;
                    color: #fff;
                    height: 77px;
                    line-height: 77px;
                    border-radius: 4px;
                }
                .numsChange {
                    position: absolute;
                    right: 0;
                    bottom: 124px;
                    display: inline-block;
                    .numsChangeBtn {
                        display: inline-block;
                        position: absolute;
                        padding: 23px;
                        text-indent: -9999px;
                        background: url(/static/details/addNumSprite.png) no-repeat;
                        background-color: transparent;
                        background-size: 400% 100%;
                        width: 65px;
                        height: 65px;
                        vertical-align: top;
                        border: 0;
                        background-origin: content-box;
                    }
                    .reduce {
                        right: 134px;
                        background-position: -97px 0;
                    }
                    .add {
                        right: 0;
                        background-position: 0 0;
                    }
                    .goodsNum {
                        display: inline-block;
                        position: absolute;
                        right: 88px;
                        margin-top: 23px;
                        color: #666;
                        font-size: 37px;
                        padding: 0;
                        width: 70px;
                        height: 65px;
                        overflow: hidden;
                        text-align: center;
                        line-height: 65px;
                        vertical-align: top;
                    }
                }
                &::before {
                    height: 2px;
                    content: '';
                    width: 100%;
                    border-bottom: 2px solid #f5f5f5;
                    position: absolute;
                    bottom: -2px;
                    right: 0;
                    z-index: 1;
                }
            }
        } 
        .storeWrap {
            background: #fff;
            height: 117px;
            font-size: 35px;
            color: #333;
            margin-top: 23px;
            display: flex;
            .storeNameWrap {
                position: relative;
                height: 117px;
                line-height: 117px;
                width: 65%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &::after {
                    content: '';
                    width: 2px;
                    height: 46px;
                    border-right: 2px solid #d9d9d9;
                    position: absolute;
                    top: 35px;
                    right: 0;
                }
                .storeName {
                    display: block;
                    height: 117px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 117px;
                    text-align: left;
                    padding-left: 23px;
                    text-decoration: none;
                    color: #555;
                    .nameIcon {
                        position: absolute;
                        top: 35px;
                        left: 23px;
                        height: 46px;
                        width: 46px;
                        background: url(/static/goods/index_moreStore.png) center center no-repeat;
                        background-size: 32px auto;
                    }
                    .nameTxt {
                        padding-left: 58px;
                        height: 56px;
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #333;
                    }
                }
            }
            .storePhoneWrap {
                position: relative;
                height: 117px;
                line-height: 117px;
                width: 35%;
                .storePhone {
                    text-align: right;
                    padding-right: 23px;
                    .phoneIcon {
                        display: inline-block;
                        vertical-align: top;
                        margin-top: 32px;
                        height: 46px;
                        width: 46px;
                        background: url(/static/goods/good_Detail_Icon.png) no-repeat;
                        background-size: 468px 351px;
                        background-position: -50px 9px;
                    }
                    .phoneTxt {
                        display: inline-block;
                        vertical-align: top;
                        color: #666;
                    }
                }
            }
        }
        .appraiseWrap {
            background: #fff;
            padding: 0 23px;
            font-size: 35px;
            color: #333;
            margin: 0 0 23px 0;
            position: relative;
            line-height: 117px;
            .appraise {
                position: relative;
                &::after {
                    height: 2px;
                    content: '';
                    width: 100%;
                    border-top: 2px solid #e8e8e8;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 1;
                }
                .appraiseTitle {
                    .perNum {
                        color: #999;
                        font-size: 28px;
                        padding-left: 9px;
                    }
                }
                .goodAppWrap {
                    margin-top: 23px;
                    padding-bottom: 46px;
                    position: relative;
                    .greenLine {
                        position: relative;
                        margin-right: 163px;
                        background-color: #e8e8e8;
                        height: 7px;
                        border-radius: 4px;
                        .hr {
                            width: 100%;
                            display: inline-block;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background-color: #47b34f;
                            height: 7px;
                            border-radius: 4px;
                            .gCircle {
                                display: inline-block;
                                position: absolute;
                                right: -9px;
                                top: -7px;
                                width: 18px;
                                height: 18px;
                                background: #47b34f;
                                border-radius: 9px;
                            }
                            .wCircle {
                                display: inline-block;
                                position: absolute;
                                right: -4px;
                                top: -2px;
                                width: 9px;
                                height: 9px;
                                background: #fff;
                                border-radius: 4px;
                            }
                        }
                    }
                    .feelGood {
                        position: absolute;
                        right: 0;
                        top: -56px;
                        font-size: 28px;
                        color: #21a12b;
                    }
                }
            }
        }
        .goodsDetails {
            background-color: #fff;
            color: #333;
            line-height: 117px;
            font-size: 35px;
            padding: 0 23px;
        }
        .detailsWrap {
            padding: 0 23px 23px 23px;
            background-color: #fff;
            .details {
                width: 100%;
                overflow-x: hidden;
                .detailsImgWrap {
                    display: inline-block;
                    width: 100%;
                    .detailsImg {
                        img {
                            width: 100%;
                            height: auto;
                            display: block;
                            float: left;
                        }
                    }
                }
            }
        }
        .detailsFoot {
            background: #fff;
            margin-top: 23px;
            .priceTxt {
                color: #333;
                font-size: 35px;
                margin-bottom: 23px;
                text-align: left;
            }
            p {
                margin: 0;
                color: #333;
                font-size: 27px;
                line-height: 40px;
                span {
                    color: #666;
                }
            }
            .pa1 {
                margin-bottom: 23px;
            }
        }
    }
    .bottomLine {
        padding-bottom: 70px;
    }
}
</style>
